<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
		<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
		<style type="text/css">
			.form{
				width: 80%;
				margin: auto;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="form">
			<h1>ms-if：元素是否出现在文档流中</h1>
			<div ms-controller="ms-if-loop">
				<h3>ms-if-loop</h3>
		        <ul>
		            <li ms-repeat="array" ms-if-loop="el">{{ el }}</li>
		            <li>它总在最后</li>
		        </ul>
			</div>
			<div ms-controller="ms-if">
				<h3>ms-if</h3>
				<label >
					<input ms-on-input="onNameInput"/> 
				</label>
				<button ms-click="onShowClick">{{(aaa.beshow>1?"隐藏":"显示")+"输入框"}}</button>
				<label ms-if="aaa.beshow>1" >
					<input ms-attr-value="name" ms-on-input="onHideIn"/> 
				</label>
			</div>
		</div>
	</body>
	<script src="../avalon.1.39.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		avalon.define({
            $id: "ms-if-loop",
            array: ["aaa", "bbb", null, "ccc"]
        });
        var msIf=avalon.define({
        	$id:"ms-if",
        	name:"",
        	aaa:{
        		beshow:"1"
        	},
        	onShowClick:function(){
        		console.log(msIf.aaa.beshow>1)
        		msIf.aaa.beshow=(msIf.aaa.beshow>1?"1":"2");
        	},
        	onNameInput:function(){
        		msIf.name=this.value;
        	},
        	onHideIn:function(){
        		console.log(this.value);
        	}
        })
        avalon.scan();
	</script>
</html>
